<template>
  <transition-group name="list" tag="ul">
    <li class="search__suggest--box" v-for="item in suggestList" :key="item.id" @click="toSuggestItem(item.id)">
      <mSuggestItemVue :suggestItem="item"></mSuggestItemVue>
    </li>
  </transition-group>
</template>
<script setup>
import mSuggestItemVue from "./m-suggest-Item.vue";
import { defineProps,defineEmits } from "vue";
defineProps({
  suggestList:Array
})
const emits = defineEmits(['to-suggest'])
const toSuggestItem = (val) =>{
  emits('to-suggest',val)
}
</script>
<style lang="stylus">
.search__suggest--box
  border-bottom 1px solid #ccc
  padding 10px 0
  .list-enter-active, .list-leave-active {
      transition: all 0.1s;
    }
  .list-enter, .list-leave-to {
      height: 0;
    }

</style>